import React, { Component } from 'react'
import { UdPage, UdPageHeader, http } from '@/lib'
import './style.scss'
import MenuTree from '../component/MenuTree'
import MenuForm from '../component/MenuForm'
import apis from '@/apis/MenusManage'
import { findTreeParentInfo } from '@/utils/methods'
import { Spin, Radio } from 'antd'
import { ESystemMenuType } from '@/utils/types'

class MenuManage extends Component<IMenuManageProps, IMenuManageState> {

  constructor(props: IMenuManageProps) {
    super(props)
    this.state = {
      loading: true,
      menus: [],
      currentMenu: null,
      formType: 'add',
      accountType: 0,
      parentMenu: null
    }
  }

  componentDidMount() {
    this.getMenus()
  }

  render() {
    let { loading } = this.state
    return (
      <UdPage className="page-menu-manage">
        <UdPageHeader title="菜单管理" />
          <div className="system-switch-box">
            <Radio.Group defaultValue="0" onChange={this.systemChangeHandle}>
              <Radio.Button value="0">员工端</Radio.Button>
              <Radio.Button value="1">经销商端</Radio.Button>
            </Radio.Group>
          </div>
          <Spin className='page-menu-spin' spinning={loading} >
            <main>
              <MenuTree
                items={this.state.menus ? this.state.menus : []}
                onSelect={this.onMenuItemSelect}
                submitSuccess={this.submitSuccess}
              />
              <MenuForm
                appCode={this.state.accountType}
                parentKey={this.state.parentMenu ? this.state.parentMenu.key : ''}
                parentName={this.state.parentMenu ? this.state.parentMenu.title : ''}
                type={this.state.formType}
                node={this.state.currentMenu}
                submitSuccess={this.submitSuccess}
              />
            </main>
          </Spin>
      </UdPage>
    )
  }

  private getMenus = () => {
    this.setState({ loading: true })
    const params = { accountType: this.state.accountType || 0 }
    http.get(apis.MenusTree, { params }).then(res => {
      const datas = res.data.child
      const menus = this.deepLoopFormate(datas)
      this.setState({ menus })
    }).finally(() => {
      this.setState({ loading: false })
    })
  }

  // 点击树判断是修改状态还是添加
  private onMenuItemSelect = (type, item) => {
    const currentMenuKey = item?.key
    let parentMenu
    if (type==='add' && item) {
      // 新增，则直接将当前操作节点数据作为正在添加的菜单的父级
      parentMenu = {title: item.title, key: item.key}
    } else if (item) {
      parentMenu = findTreeParentInfo(this.state.menus,currentMenuKey,'key')
    }
    
    this.setState({ formType: type, currentMenu: item, parentMenu })
  }

  // form 提交数据成功后重修加载数据
  protected submitSuccess = () => {
    this.getMenus()
  }
  
  public deepLoopFormate = (datas) => {
    if (!Array.isArray(datas) || datas.length === 0) {
      return datas
    }
    let res = []
    datas.map(data => {
      const { child, customId: value, text: title, type, ...reset } = data
      let item: any = { ...reset, value, title, key: value, children: [], type }
      if (child) {
        item.children = this.deepLoopFormate(child)
      }
      res.push(item)
    })
    return res
  }

  public systemChangeHandle = (e) => {
    console.log(e)
    const accountType = e.target.value
    this.setState({
      accountType,
      currentMenu: null,
      parentMenu: null,
      formType: 'add',
    },() => this.getMenus() )
  }

}

interface IMenuManageProps {

}

interface IMenuManageState {
  loading: boolean
  menus: any[]
  currentMenu: any
  parentMenu: any
  formType: 'add' | 'edit'
  accountType: any
}

export default MenuManage
